import {PropType} from 'vue'
type Key = string | number

export function CoustomTableFn<T = any>() {
  return defineComponent({
    props: {
      dataSource: {
        type: Array as PropType<T[]>,
        default: [],
      },
      columns: {
        type: Array as PropType<CColumn<T>[]>,
        default: [],
      },
      rowKey: {
        type: String as unknown as PropType<keyof T>,
        required: true,
      },
      scroll: {
        type: Object as PropType<{y: number}>,
        default: {
          y: 718,
        },
      },
      loading: {
        type: Boolean,
        default: false,
      },
      pagination: {
        type: Object as PropType<{page: number; size: number; total: number}>,
        default: {
          page: 1,
          size: 20,
          total: 0,
        },
      },
      showPagination: {
        type: Boolean,
        default: true,
      },
      isDefaultBodyCell: {
        type: Boolean,
        default: true,
      },
    },
    emits: {
      selectChange: (data: T[]): boolean => true,
      paginationChange: (data: {page: number; size: number}): boolean => true,
    },
    setup(props, {slots, emit}) {
      let {dataSource, pagination} = toRefs(props)

      let scroll = computed(() => {
        return Object.assign(
          {
            scrollToFirstRowOnChange: true,
            y: 718,
          },
          props.scroll
        )
      })
      let table_loading = computed(() => props.loading) //表格加载状态

      let table_selectRowKeys = ref<Key[]>([]) //被选中的行的简单列表数据，跟rowKey有关

      /**表格分页配置 */
      let tablPpagination = reactive({
        defaultPageSize: pagination.value.size, //默认的每页条数
        pageSizeOptions: ['10', '20', '40', '80', '100'], //指定每页可以显示多少条
        hideOnSinglePage: false, //只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
        showTotal: (total: number, range: number[]) => {
          return '共有' + total + '条'
        }, //用于显示数据总量和当前数据顺序
        size: '', //small
        onChange: (page: number, pageSize: number) => {
          emit('paginationChange', {
            page,
            size: pageSize,
          })
        },
      })

      /**处理表格头伸缩 */
      function handleResizeColumn(w: any, col: any) {
        col.width = w
      }

      const onSelectChange = (selectedRowKeys: Key[], selectedRows: any[]) => {
        table_selectRowKeys.value = selectedRowKeys
        emit('selectChange', selectedRows)
      }

      watch(
        () => dataSource.value,
        n => {
          if (Array.isArray(n)) {
            table_selectRowKeys.value = []
          }
        },
        {immediate: true, deep: true}
      )
      return () => (
        <div class="h-full flex flex-col">
          <a-table
            class="flex-1"
            dataSource={dataSource.value}
            loading={table_loading.value}
            columns={props.columns}
            rowKey={props.rowKey}
            pagination={false}
            onResizeColumn={handleResizeColumn}
            scroll={scroll.value}
            row-selection={{
              selectedRowKeys: table_selectRowKeys.value,
              onChange: onSelectChange,
            }}
          >
            {props.isDefaultBodyCell
              ? {
                  bodyCell: ({
                    text,
                    record,
                    index,
                    column,
                  }: {
                    text: string
                    record: T
                    index: number
                    column: CColumn<T>
                  }) => {
                    if (column.isUtil) {
                      return slots.util ? slots.util(record) : null
                    } else if (column.isIndex) {
                      return (
                        <div class="truncate">
                          {(pagination.value.page - 1) * pagination.value.size +
                            index +
                            1}
                        </div>
                      )
                    } else {
                      return slots.bodyCell
                        ? slots.bodyCell(text, record, index, column)
                        : null
                    }
                  },
                }
              : null}
          </a-table>
          {props.showPagination ? (
            <div class="h-mainViewfooter border-t border-default flex justify-start items-center pl-4">
              <a-pagination
                calss="flex-1"
                current={pagination.value.page}
                page-size={pagination.value.size}
                total={pagination.value.total}
                defaultPageSize={tablPpagination.defaultPageSize}
                pageSizeOptions={tablPpagination.pageSizeOptions}
                hideOnSinglePage={tablPpagination.hideOnSinglePage}
                showQuickJumper={tablPpagination.showQuickJumper}
                showSizeChanger={tablPpagination.showSizeChanger}
                showTotal={tablPpagination.showTotal}
                size={tablPpagination.size}
                onChange={tablPpagination.onChange}
              ></a-pagination>
            </div>
          ) : null}
        </div>
      )
    },
  })
}
